<template>
  <div class="">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#FF6347">
        <van-swipe-item v-for="item in swiperList" :key="item._id">
          <img :src="item.coverImg" alt="" />
        </van-swipe-item>
      </van-swipe>
      <van-notice-bar
        left-icon="volume-o"
        scrollable
        color="#F08080"
        background="#ecf9ff"
        text="限时充值会员，满500可立送价值800元优惠券，先到先得。"
        mode="closeable"
      />
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in shopList"
          :key="item._id"
          @click="toDetail(item._id)"
          class="list"
        >
          <div class="shoplist">
            <img :src="item.coverImg" alt="" />
            <div>
              <p class="name">{{ item.name }}</p>
              <p class="price">￥{{ item.price }}</p>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { reqProductsAPI } from "../../api/products";
export default {
  data() {
    return {
      swiperList: [], //显示轮播图的图片
      shopList: [], //显示商品列表
      page: 1, //页码
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  computed: {},
  watch: {},

  methods: {
    //轮播图显示的图片
    async getSwiperImg() {
      let result = await this.$http.get(
        "http://localhost:3009/api/v1/products",
        {
          params: {
            per: 5, //每一页显示的数量,默认10
          },
        }
      );
      // console.log(result);
      if (result.status == 200) {
        this.swiperList = result.data.products;
        // console.log(this.swiperList);
      }
    },
    // 获取商品列表
    async getShopList() {
      if (this.refreshing) {
        this.shopList = [];
        this.refreshing = false;
      }
      this.loading = true; //开启加载
      let result = await reqProductsAPI({ page: this.page });
      console.log(result);
      this.loading = false; //关闭加载
      // 上拉刷新，把现在的数据喝原来的合并起来
      this.shopList = [...this.shopList, ...result.products];
      // 如果新获取页的数量小于十，就表示到最后一页了，停止加载
      if (result.products.length < 10) {
        this.finished = true;
      } else {
        this.page++; //否则的话就页数加一
      }
    },
    onLoad() {
      this.getShopList();
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },

    //点击跳转到详情页
    toDetail(pid) {
      //动态传参
      this.$router.push({
        path: "/detail/" + pid,
      });
    },
  },
  created() {
    this.getSwiperImg();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.my-swipe .van-swipe-item {
  height: 160px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
.list {
  width: 96%;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  margin-top: 10px;
  padding: 12px;
  box-sizing: border-box;
  line-height: 1.8;
}
.shoplist {
  display: flex;
}
.shoplist img {
  width: 80px;
  margin-right: 20px;
}
.shoplist .name {
  font-size: 14px;
}
.shoplist .price {
  color: red;
  font-size: 14px;
}
.van-list {
  padding-bottom: 50px;
}
</style>
